<script setup lang="ts">
	import { ref, unref, computed, watch } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { route } from '@/uni_modules/uview-plus'
	import { useNotify } from '@/hooks/web/useNotify/index.js'
	import { returnOrderList, createReturnOrderList, warehouseList } from '@/package_tms/api/Home'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	const remark = ref('')
	const checkTrue = ref(false)

	onLoad(() => {
		warehouse.getList()
		getDetail()
	})

	// 选择仓库
	const warehousename = ref('点击请选择仓库')
	const warehouse_id = ref('')
	const useWarehouse = () => {

		const show = ref(false)

		const changeShow = (status : boolean) => {
			show.value = status
		}
		const open = () => {
			changeShow(true)
		}
		const list = ref([])
		const getList = async () => {
			const res = await warehouseList()
			list.value = res.data
		}

		const confirm = (value) => {
			warehouse_id.value = value.id
			warehousename.value = value.name
		}

		return {
			show,
			changeShow,
			open,
			list,
			getList,
			confirm
		}
	}
	const warehouse = useWarehouse()

	const useGetDetail = () => {
		const detailInfo = ref([])

		const getDetail = async () => {
			const params = {
				status: 1
			}
			const res = await returnOrderList(params)
			detailInfo.value = res.data.map((val) => {
				return {
					...val,
					checked: false
				}
			})
		}

		return {
			detailInfo,
			getDetail
		}
	}
	const { getDetail, detailInfo } = useGetDetail()


	// // // 创建一个计算属性来计算选中的总数量
	const totalSelectedAmount = computed(() => {
		return detailInfo.value.filter(item => item.checked) // 筛选出选中的订单
			.length; // 计算总数量
	});

	//全选
	const checkSelect = () => {
		if (checkTrue.value == true) {
			checkTrue.value = false;
			// 遍历RecordList数组 取消全选
			detailInfo.value.forEach(item => {
				item.checked = false
			})
		} else {
			checkTrue.value = true;
			// 遍历RecordList数组 设置全选
			detailInfo.value.forEach(item => {
				item.checked = true
			})
		}

	}
	const checkSelectItem = (e, item) => {
		// 如果是取消选中，就把checked置为false,如果是选中，就给添加一个checked=true
		if (item.checked == true) {
			item.checked = false
		} else {
			item.checked = true
		}
		// 过滤出数组中checked为true的项目，如果和原RecordList长度相等，就全选显示
		let newArr = detailInfo.value.filter(item => (item.checked == true))
		if (newArr.length === detailInfo.value.length) {
			checkTrue.value = true;
		} else {
			checkTrue.value = false;
		}
	}

	// 跳转详情
	const checkDetail = (item) => {
		route({
			url: 'package_tms/pages/transfer/detail',
			params: {
				name: item.store.name,
				id: item.id
			}
		})
	}


	const submitLoading = ref(false)
	const submit = async () => {
		if (totalSelectedAmount.value == 0) {
			showNotify({
				type: 'error',
				message: '请选择订单'
			})
			return false
		}
		submitLoading.value = true
		try {
			const checkedIds = detailInfo.value
				.filter(item => item.checked) // 筛选出 item.checked 为 true 的项
				.map(item => item.id);
			const params = {
				ids: checkedIds.join(','),
				remark: remark.value,
				warehouse_id: warehouse_id.value
			}
			const res = await createReturnOrderList(params)
			showNotify({
				type: 'success',
				message: res.msg
			})
			setTimeout(() => {
				uni.reLaunch({
					url: `/package_tms/pages/transfer/index`
				})
			}, 1000)
		} catch (err) {
			showNotify({
				type: 'error',
				message: err.msg
			})
		} finally {
			submitLoading.value = false
		}

	}
</script>

<template>
	<view class="content">
		<view class="content-header">
			<view class="header-name" @click="warehouse.open()">
				{{ warehousename }}
			</view>
		</view>
		<view class="content-main">
			<view class="payment-header">
				<view class="payment-name">
					<up-row>
						<up-col span="9">
							订单列表
						</up-col>
						<up-col span="3">
							<!-- 全选复选框 -->
							<view class="control-checkbox">
								<!-- 全选复选框 -->
								<checkbox-group @change="checkSelect">
									<label style="display: flex;">
										<checkbox :checked="checkTrue"></checkbox>
									</label>
								</checkbox-group>
							</view>
						</up-col>
					</up-row>
				</view>

				<view class="payment-tow">已选择<span class="payment-text"> {{ totalSelectedAmount }}</span></view>
			</view>
			<view class="box-main">
				<view class="main-box" v-for="(item, index) in detailInfo" :key="item.id">
					<up-row>
						<up-col span="1">
							<!--选中图标-->
							<checkbox-group @change="checkSelectItem($event, item)">
								<label>
									<checkbox :value="item.value" :checked="item.checked" />
								</label>
							</checkbox-group>
						</up-col>
						<up-col span="11" @click="checkDetail(item)">
							<view class="box">
								<view class="box-name">订单：{{item.order_info?.no}}</view>
								<view class="box-name">商品数：{{ item.product_num }}</view>
							</view>
							<view class="box">
								<view class="box-name">门店：{{item.store?.store_name}}</view>
								<view class="box-name">品类数：{{item.cate_num}}</view>
							</view>
							<view class="box">
								<view class="box-text">{{ item.create_time }}</view>
								<view class="box-text">备注：{{item.remark}}</view>
							</view>
						</up-col>
					</up-row>
				</view>
			</view>

		</view>
		<!-- 备注 -->
		<view class="payment-method">
			<view class="method-header">
				<view class="header-left">备注</view>
			</view>
			<view class="method-foot">
				<up-input placeholder="备注信息" border="surround" v-model="remark"></up-input>
			</view>
		</view>
		<view class="main-footer">
			<up-button text="确定" :loading="submitLoading" :disabled="submitLoading" @click="submit()"
				color="rgba(55, 131, 252, 1)"></up-button>
		</view>
		<up-action-sheet :actions="warehouse.list.value" @select="warehouse.confirm" cancelText="取消" closeOnClickOverlay
			closeOnClickAction safeAreaInsetBottom @close="warehouse.changeShow(false)" round="20rpx" title="请选择仓库"
			:show="warehouse.show.value"></up-action-sheet>
		<up-notify ref="NotifyRef"></up-notify>
	</view>
</template>


<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background: rgba(242, 243, 245, 1);

		.content-header {
			// width: 702rpx;
			// border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			margin: 5rpx auto;
			padding: 30rpx;
			box-sizing: border-box;

			.header-name {
				font-size: 28rpx;
				font-weight: 700;
				color: rgba(55, 131, 252, 1);
			}
		}


		.content-main {
			width: 750rpx;
			margin-top: 40rpx;


			.payment-header {
				width: 750rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: rgba(255, 255, 255, 1);
				padding: 30rpx;
				box-sizing: border-box;

				.payment-name {
					width: 180rpx;
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(36, 34, 34, 1);
				}

				.payment-tow {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.4);
				}

				.payment-text {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(55, 131, 252, 1);
					margin: 0rpx 5rpx;
				}
			}

			.box-main {
				width: 750rpx;
				// height: calc(100vh - 445rpx);
				// overflow-y: scroll;

				.main-box {
					background: rgba(255, 255, 255, 1);
					padding: 30rpx;
					box-sizing: border-box;
					margin: 20rpx auto;

					.box {
						display: flex;
						justify-content: space-between;

						.box-name {
							font-size: 28rpx;
							font-weight: 500;
							color: rgba(2, 14, 36, 1);
							margin-bottom: 10rpx;
						}

						.box-text {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba(145, 146, 148, 1);
							margin-top: 10rpx;
						}
					}
				}
			}
		}

		.payment-method {
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;

			.method-header {
				display: flex;
				justify-content: space-between;

				.header-left {
					font-size: 28rpx;
					color: rgba(2, 14, 36, 1);
				}
			}

			.method-foot {
				margin: 20rpx 0rpx;
			}
		}


		.main-footer {
			position: fixed;
			bottom: 80rpx;
			left: 30rpx;
			width: 702rpx;

		}
	}
</style>